<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>倒计时-countdown</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.countdown{
				margin-bottom:15px;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.countdown.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="countdown">
				<p>#例子1# 12:30:50到12:30:30</p>
				<p id="time1">12:30:50</p>
			</div>
			<div class="code">
				<p>$('#time1').countdown({'endtime':'12:30:30'});</p>
			</div>
			<div class="countdown">
				<p>#例子2# 60到5</p>
				<p id="time2">60</p>
			</div>
			<div class="code">
				<p>$('#time2').countdown({'endtime':5,'countEnd':function(){alert('倒计时结束!');}});</p>
			</div>
			<script>
				$('#time1').countdown({'endtime':'12:30:30'});
				$('#time2').countdown({'endtime':5,'countEnd':function(){alert('倒计时结束!');}});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).countdown(options,callback(api));</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>format</td>
							<td>'hh:mm:ss'</td>
							<td>格式化输出的时间格式，年(y)、月(M)、日(d)、小时(h)、分(m)、秒(s)、毫秒(S)、季度(q)</td>
						</tr>
						<tr>
							<td>starttime</td>
							<td>''</td>
							<td>开始时间</td>
						</tr>
						<tr>
							<td>endtime</td>
							<td>''</td>
							<td>结束时间</td>
						</tr>
						<tr>
							<td>interval</td>
							<td>1000</td>
							<td>计数的时间间隔（单位：毫秒）</td>
						</tr>
						<tr>
							<td>disableBtnCls</td>
							<td>disable</td>
							<td>计数期间的class</td>
						</tr>
						<tr>
							<td>auto</td>
							<td>true</td>
							<td>是否默认开启计数</td>
						</tr>
						<tr>
							<td>countEach(time)</td>
							<td>[时间格式化输出]</td>
							<td>每计时单位执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出</td>
						</tr>
						<tr>
							<td>countEnd(time)</td>
							<td>[时间格式化输出]</td>
							<td>计时结束后执行,其中time包含时间信息：year年、quarter季度、month月、day日、hour小时、minute分钟、second秒、microsecond毫秒、format格式化输出</td>
						</tr>
					</tbody>
				</table>
				<h2>callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th width="200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>reset()</td>
							<td>重置</td>
						</tr>
						<tr>
							<td>setStarttime()</td>
							<td>设置开始时间</td>
						</tr>
						<tr>
							<td>setEndtime()</td>
							<td>设置结束时间</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display: none;">
			<script src="http://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
</html>
